<template>
  <a-card :title="title">


    <div ref="chartRef" style="height: 400px"></div>
  </a-card>
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref, watch} from 'vue'
import {Column} from '@antv/g2plot';


let plot = null
const chartRef = ref(null)


// 查询条件 查询天数 以及 数据环境设置
const query = reactive({days: 15, real: false})

const title = '宜宾市各区经济结构'


const initChart = () => {
  plot = new Column(chartRef.value, {
    data: [],
    isGroup: true,
    xField: 'city',
    yField: 'value',
    seriesField: 'type',
    dodgePadding: 2,
    intervalPadding: 12,
    label: {
      position: 'top',
      layout: [
        {type: 'interval-adjust-position'},
        {type: 'interval-hide-overlap'},
        {type: 'adjust-color'},
      ],
    },
  })
  plot.render()

}

const loadChartData = async () => {
  const data = [
    {
      "city": "翠屏区",
      "type": "服务业产值",
      "value": 14500
    },
    {
      "city": "翠屏区",
      "type": "工业产值",
      "value": 8500
    },
    {
      "city": "翠屏区",
      "type": "农业产值",
      "value": 10000
    },
    {
      "city": "翠屏区",
      "type": "科研产值",
      "value": 7000
    },
    {
      "city": "高县",
      "type": "服务业产值",
      "value": 9000
    },
    {
      "city": "高县",
      "type": "工业产值",
      "value": 8500
    },
    {
      "city": "高县",
      "type": "农业产值",
      "value": 11000
    },
    {
      "city": "高县",
      "type": "科研产值",
      "value": 6000
    },
    {
      "city": "江安县",
      "type": "服务业产值",
      "value": 16000
    },
    {
      "city": "江安县",
      "type": "工业产值",
      "value": 5000
    },
    {
      "city": "江安县",
      "type": "农业产值",
      "value": 6000
    },
    {
      "city": "江安县",
      "type": "科研产值",
      "value": 10000
    },
    {
      "city": "屏山县",
      "type": "服务业产值",
      "value": 14000
    },
    {
      "city": "屏山县",
      "type": "工业产值",
      "value": 9000
    },
    {
      "city": "屏山县",
      "type": "农业产值",
      "value": 10000
    },
    {
      "city": "屏山县",
      "type": "科研产值",
      "value": 9000
    },
    {
      "city": "筠连县",
      "type": "服务业产值",
      "value": 14000
    },
    {
      "city": "筠连县",
      "type": "工业产值",
      "value": 9000
    },
    {
      "city": "筠连县",
      "type": "农业产值",
      "value": 10000
    },
    {
      "city": "筠连县",
      "type": "科研产值",
      "value": 6000
    },
    {
      "city": "兴文县",
      "type": "服务业产值",
      "value": 9000
    },
    {
      "city": "兴文县",
      "type": "工业产值",
      "value": 8500
    },
    {
      "city": "兴文县",
      "type": "农业产值",
      "value": 10000
    },
    {
      "city": "兴文县",
      "type": "科研产值",
      "value": 6000
    },
    {
      "city": "常宁县",
      "type": "服务业产值",
      "value": 17000
    },
    {
      "city": "常宁县",
      "type": "工业产值",
      "value": 6000
    },
    {
      "city": "常宁县",
      "type": "农业产值",
      "value": 7000
    },
    {
      "city": "常宁县",
      "type": "科研产值",
      "value": 10000
    },
    {
      "city": "南溪区",
      "type": "服务业产值",
      "value": 18000
    },
    {
      "city": "南溪区",
      "type": "工业产值",
      "value": 11000
    },
    {
      "city": "南溪区",
      "type": "农业产值",
      "value": 15000
    },
    {
      "city": "南溪区",
      "type": "科研产值",
      "value": 14000
    }
  ]
  plot.changeData(data)
}
onMounted(async () => {
  await initChart();
  await loadChartData();
})
watch(query, () => loadChartData())
</script>

